<template>
  <div class="box">
      <el-form label-width="120px" :rules="rules" ref="loginRef" :model="loginForm">
          <el-form-item label="用户名" prop="username">
              <el-input class="Inp" v-model="loginForm.username" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
              <el-input class="Inp"  v-model="loginForm.password"/>
          </el-form-item>
      </el-form>
      <el-button type="" class="btn" @click="login(loginRef)">登录</el-button>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
// 引入自定义变量类型
import { FormRules, FormInstance } from 'element-plus'
// 引入路由控制器的语法
import { useRouter} from 'vue-router'
// 设置路由控制器的方法
let router=useRouter()
// 规则验证
let rules = reactive<FormRules>({
  username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 2, max: 8, message: 'Length should be 2 to 8', trigger: 'blur' },
  ],
  password: [
      {
          required: true,
          message: '请输入密码',
          trigger: 'change',
      }
  ]
})
// 表单
let loginForm =reactive({
  username:'',
  password:''
})
// 登录事件
let loginRef=ref<FormInstance>()
const login =async (formEl:FormInstance | undefined)=>{
  if(!formEl) return
  await formEl.validate(val=>{
      if(val){
          // console.log(val);
          // 登陆成功跳转index
          router.push('/index')
      }else{
          console.log('失败了');
          
      }
  })
}
</script>
<style lang="less" scoped>
.Inp {
  width: 300px;
}

.box {
  margin: 300px;
  text-align: center;
  line-height: 60px;
}
.btn{
  margin-right: 50px;
}
</style> 